<template>
  <base-page title="相册">
    <!-- 老版相册 -->
    <!--    <figure class="image">-->
    <!--      <router-link to="/image/detail" class="image-cover-wrapper">-->
    <!--        <img-->
    <!--          class="image-cover"-->
    <!--          src="http://imain.net/usr/uploads/2018/02/1254835428.png"-->
    <!--          alt="2020-03-04"-->
    <!--        />-->
    <!--      </router-link>-->
    <!--      <figcaption class="image-title">-->
    <!--        标题-->
    <!--      </figcaption>-->
    <!--    </figure>-->
    <WaterFall :data="images" />
  </base-page>
</template>

<script>
import BasePage from "@/components/BasePage/index.vue";
import WaterFall from "@/components/WaterFall/WaterFall";

export default {
  name: "Images",
  components: {
    BasePage,
    WaterFall
  },
  data() {
    return {
      images: [
        {
          src:
            "https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1035415831,1465727770&fm=26&gp=0.jpg",
          title: "成都之行成都之行成都之行成都之行成都之行"
        },
        {
          src: "http://imain.net/usr/uploads/2018/02/1254835428.png",
          title: ""
        },
        {
          src:
            "",
          title: ""
        },
        {
          src:
            "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=4018557288,1217151095&fm=26&gp=0.jpg",
          title: ""
        },
        {
          src:
            "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2436786008,3765340035&fm=11&gp=0.jpg",
          title: ""
        },
        {
          src:
            "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1963304009,2816364381&fm=26&gp=0.jpg",
          title: ""
        },
        {
          src:
            "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=4012470373,3540768040&fm=26&gp=0.jpg",
          title: ""
        },
        {
          src:
            "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=139910319,1330512143&fm=26&gp=0.jpg",
          title: "我一直都在"
        },
        {
          src:
            "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2104801820,2623271160&fm=11&gp=0.jpg",
          title: ""
        },
        {
          src:
            "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=616391314,1357096614&fm=11&gp=0.jpg",
          title: ""
        },
        {
          src:
            "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2161979668,2210581034&fm=26&gp=0.jpg",
          title: ""
        },
        {
          src:
            "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1002782512,2142316990&fm=26&gp=0.jpg",
          title: ""
        },
        {
          src:
            "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2863802163,1489270802&fm=11&gp=0.jpg",
          title: ""
        }
      ]
    };
  }
};
</script>

<style lang="scss" scoped>
.image-wrapper {
  position: relative;
  /*overflow: hidden;*/
}

.image {
  width: 18.4%;
  padding-bottom: 14%;
  cursor: pointer;
  border-radius: 4px;
  display: inline-block;
  margin: 0 0 2% 0;
  position: relative;

  &:not(:nth-of-type(5n)) {
    margin-right: 2%;
  }

  &:before,
  &:after {
    width: 80%;
    height: 20%;
    content: " ";
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
    position: absolute;
    bottom: 9px;
  }

  &:before {
    transform: skew(-15deg) rotate(-5deg);
    left: 15px;
  }

  &:after {
    transform: skew(15deg) rotate(5deg);
    right: 15px;
  }
}

.image-cover-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
  height: 100%;
  width: 100%;
  overflow: hidden;

  &:hover {
    .image-cover {
      transform: scale(1.5);
    }
  }
}

.image-cover {
  height: 100%;
  width: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.image-title {
  font-size: 14px;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 100%;
  z-index: 3;
  background: #fff;
  text-align: center;
  color: #888;
  padding: 5px;
}
</style>
